<script setup>
defineProps({
  course: Object
})
</script>

<template>
  <view class="item">
    <!-- 封面 -->
    <view class="img-box">
      <image
        :style="{ height: course.imgHeight + 'rpx' }"
        :src="course.image"
        mode="aspectFill"
      ></image>
    </view>

    <!-- 描述 -->
    <view class="desc">
      <view class="sortBox">
        <view class="sort" v-if="course.sortName1">{{ course.sortName1 }}</view>
        <view class="sort" v-if="course.sortName2">{{ course.sortName2 }}</view>
        <view class="sort" v-if="course.sortName3">{{ course.sortName3 }}</view>
      </view>
      <view class="name">{{ course.name }}</view>
    </view>
  </view>
</template>

<style lang="scss">
.item {
  width: 100%;
  display: flex;
  flex-direction: column;
  break-inside: avoid;
  margin-bottom: 24rpx;
  border-radius: 16rpx;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.06);
  transition: all 0.25s ease;
  transform-origin: center bottom;

  &:hover {
    transform: translateY(-6rpx) scale(1.02);
    box-shadow: 0 10rpx 22rpx rgba(0, 0, 0, 0.08);
  }

  .img-box {
    width: 100%;
    overflow: hidden;

    image {
      width: 100%;
      border-radius: 0;
      transition: transform 0.35s ease;
    }

    &:hover image {
      transform: scale(1.05);
    }
  }

  .desc {
    padding: 20rpx 10rpx;
    display: flex;
    flex-direction: column;
    gap: 10rpx;

    .sortBox {
      display: flex;
      flex-wrap: wrap;
      gap: 8rpx;

      .sort {
        font-size: 20rpx;
        color: #3b73f0;
        background: rgba(59, 115, 240, 0.08);
        border: 1rpx solid rgba(59, 115, 240, 0.15);
        border-radius: 20rpx;
        padding: 6rpx 12rpx;
      }
    }

    .name {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
}

</style>
